import { FC, useState, useEffect, useMemo } from 'react';
import { useModel } from 'umi';
import Image from '@/components/Image';
import SwiperList from '@/components/SwiperList';
import InSelect from '@/components/InSelect';
import InTable from '@/components/InTable';
import SimpleList from '@/components/SimpleList';
import BarLine from '@/components/BarLine';
import Pie from '@/components/Pie';
import { Button } from 'antd';

import styles from './style.less';

import mainPic from '@/assets/cyl/detail/main.png';
import line from '@/assets/cyl/detail/line.png';
import detail1 from '@/assets/cyl/icon/detail1.png';
import detail2 from '@/assets/cyl/icon/detail2.png';
import detail3 from '@/assets/cyl/icon/detail3.png';
import detail4 from '@/assets/cyl/icon/detail4.png';
import detail5 from '@/assets/cyl/icon/detail5.png';
import searchIcon from '@/assets/search_icon.png';
import back from '@/assets/cyl/detail/back.png';

const dataBoardIcon = [detail1, detail2, detail3, detail4, detail5];
const setDataBoardIcon = (title: string) => {
  switch (title) {
    case '工业总产值':
      return detail1;
    case '营业收入':
      return detail2;
    case '利润总额':
      return detail4;
    case '能源消耗':
      return detail5;
    case '用工人数':
      return detail3;
    default:
      return detail1;
  }
};
const buttonStyle = {
  marginTop: '5px',
};
const buttonTab = {
  borderColor: '#35F2FF!important',
  color: '#35F2FF!important',
  marginRight: '10px',
  transform: 'skewX(-15deg)',
};
const buttonActStyle = {
  backgroundColor: '#fff!important',
  color: '#fff!important',
  marginRight: '10px',
  transform: 'skewX(-15deg)',
};

interface props {
  type: string;
  parent: string;
  detailKey: string;
}
const keysArr = ['upper', 'middle', 'lower'];
const Detail: FC<props> = (props) => {
  const { type, parent, detailKey } = props;
  const [dataBoardShow, setDataBoardShow] = useState<number>(0);
  const [pageNo, setPageNo] = useState<number>(1);
  const [trendType, setTrendType] = useState<number>(1);
  const [currentKey, setCurrentKey] = useState<number>(0);
  const [currentChain, setCurrentChain] = useState<any>(undefined);
  const {
    chainList,
    getChainList,
    dataBoard,
    getDataBoard,
    entList,
    getEntList,
    trends,
    getTrends,
    dataBoardBar,
    getDataBoardBar,
    dataBoardPie,
    getDataBoardPie,
  } = useModel('detail');
  const chainType = useMemo(() => {
    const keys = keysArr[currentKey];
    if (keys && chainList[keys]) {
      return chainList[keys].map((item: any) => ({
        label: item.processes_name,
        value: item.processes_no,
      }));
    }
    return [];
  }, [currentKey, chainList]);
  const toGetTrends = () => {
    getTrends({
      Type: trendType,
      pageNo,
      pageSize: 4,
      industrial_chain_id: detailKey,
    });
  };
  const toGetDataBoardBar = (dataType: string) => {
    getDataBoardBar({
      industrial_chain_id: type + '产业链',
      type: dataType,
    });
  };
  const toGetDataBoardPie = (dataType: string) => {
    getDataBoardPie({
      industrial_chain_id: type + '产业链',
      type: dataType,
    });
  };
  const toGetEntList = () => {
    getEntList({
      industrial_chain_no: type + '产业链',
      industrial_chain_parent: parent,
      processes_type: currentKey,
      processes_no: currentChain,
    });
  };
  useEffect(() => {
    getChainList({ industrial_chain_id: detailKey });
    getDataBoard({ industrial_chain_id: type + '产业链' });
    toGetEntList();
    toGetTrends();
  }, [type]);
  return (
    <div className={styles.wrap}>
      <div className={styles.mid_content}>
        <div className={styles.title}>
          <h4>{type}</h4>
          <span>产业链</span>
        </div>
        <Image src={mainPic} className={styles.mainPic} />
        <Image src={line} className={styles.line} />
        <Image src={chainList.icon} className={styles.icon} />
        <div className={styles.chain}>
          <section>
            <div className={styles.box_title}>
              <span>上游</span>
              <span>产业</span>
            </div>
            <SwiperList dataSource={chainList.upper || []} />
          </section>
          <section>
            <div className={styles.box_title}>
              <span>中游</span>
              <span>产业</span>
            </div>
            <SwiperList dataSource={chainList.middle || []} />
          </section>
          <section>
            <div className={styles.box_title}>
              <span>下游</span>
              <span>产业</span>
            </div>
            <SwiperList dataSource={chainList.lower || []} />
          </section>
        </div>
      </div>
      <div className={styles.dataBord}>
        <div className={styles.top_wrap}>
          <h4>数据看板</h4>
          {dataBoardShow ? (
            <span
              className={styles.backBox}
              onClick={() => setDataBoardShow(0)}
            >
              <Image src={back} />
              返回
            </span>
          ) : null}
        </div>
        {dataBoardHtml(dataBoardShow)}
      </div>
      <div className={styles.entList}>
        <div className={styles.top_wrap}>
          <h4>企业名单</h4>
          <div>
            <InSelect
              options={[
                {
                  label: '上游',
                  value: 0,
                },
                {
                  label: '中游',
                  value: 1,
                },
                {
                  label: '下游',
                  value: 2,
                },
              ]}
              value={currentKey}
              onChange={(v: any) => setCurrentKey(v)}
              placeholder="请选择"
            />
            <InSelect
              style={{ marginLeft: '10px' }}
              options={chainType}
              placeholder="请选择"
              onChange={(v: any) => setCurrentChain(v)}
            />
            <Image
              style={{ marginLeft: '10px' }}
              src={searchIcon}
              onClick={toGetEntList}
            />
          </div>
        </div>
        <SimpleList
          columns={[
            {
              dataIndex: 'B102',
              title: '公司名称',
              width: 220,
            },
            {
              dataIndex: 'C01_2',
              title: '工业总产值',
              width: 100,
            },
            {
              dataIndex: 'C301_1',
              title: '营业收入',
              width: 100,
            },
            {
              dataIndex: 'Z48',
              title: '能源能耗',
              width: 100,
            },
            {
              dataIndex: 'C606_1',
              title: '用工人数',
              width: 100,
            },
            {
              dataIndex: 'C327_1',
              title: '利润总和',
              width: 100,
            },
          ]}
          dataSource={entList}
          hover
          width={800}
          height={240}
        />
      </div>
      <div className={styles.trends}>
        <div className={styles.top_wrap}>
          <h4>产业动态</h4>
          <div className={styles.skewBtn}>
            <Button
              ghost
              style={trendType === 1 ? buttonActStyle : buttonTab}
              onClick={() => {
                setTrendType(1);
                toGetTrends();
              }}
            >
              全部动态
            </Button>
            <Button
              ghost
              style={trendType == 2 ? buttonActStyle : buttonTab}
              onClick={() => {
                setTrendType(2);
                toGetTrends();
              }}
            >
              开发区动态
            </Button>
          </div>
        </div>
        <div
          style={{
            width: 780,
            margin: '0 auto',
          }}
        >
          <InTable
            pageSize={4}
            onChange={(i) => {
              setPageNo(i);
              toGetTrends();
            }}
            columns={[
              { dataIndex: 'title', width: '280px' },
              { dataIndex: 'date' },
              {
                dataIndex: 'url',
                render: (item) => (
                  <a onClick={() => window.open(item.url)}>查看</a>
                ),
                width: '60px',
              },
            ]}
            dataSource={trends.records}
            total={trends.total}
            showHeader={false}
          />
        </div>
      </div>
    </div>
  );

  function dataBoardHtml(index: number) {
    if (index === 0) {
      return (
        <div className={styles.boardList}>
          {dataBoard.map((item: any, index: number) => (
            <div key={item.title}>
              <Image src={setDataBoardIcon(item.title)} />
              <h4 className={styles.boardTitle}>{item.title}</h4>
              <p className={styles.value}>
                <span>{item?.val || 0}</span>
                <span>{item.danWei}</span>
              </p>
              <p>同比{item.tongBi}</p>
              <Button
                block
                ghost
                style={buttonStyle}
                onClick={() => {
                  setDataBoardShow(1);
                  toGetDataBoardBar(item.type);
                }}
              >
                历史趋势图
              </Button>
              <Button
                block
                ghost
                style={buttonStyle}
                onClick={() => {
                  setDataBoardShow(2);
                  toGetDataBoardPie(item.type);
                }}
              >
                重点企业占比
              </Button>
            </div>
          ))}
        </div>
      );
    } else if (index === 1) {
      return (
        <div>
          <BarLine
            style={{ margin: '0 auto' }}
            width={640}
            height={240}
            dataSource={{
              bar: (dataBoardBar.barData && dataBoardBar.barData.data) || [],
              line: (dataBoardBar.barData && dataBoardBar.lineData.data) || [],
            }}
            category={(dataBoardBar.barData && dataBoardBar.xName) || []}
          />
        </div>
      );
    } else if (index === 2) {
      return (
        <div>
          <Pie
            title={'重点企业占比'}
            boxStyle={{ margin: '0 auto' }}
            width={640}
            height={240}
            dataSource={dataBoardPie.values || []}
            colors={[]}
            titlePosition={{ bottom: 0, left: 260 }}
            legend={{ show: true, textStyle: { color: 'white' } }}
          />
        </div>
      );
    }
  }
};

export default Detail;
